<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="128px"
      label-position="right"
      class="flex-form-3 basic-form"
      size="mini"
      v-if="dialogType != 'detail'"
    >
    <el-form-item label="批次号" prop="voyageNo">
      <el-input
        v-model.trim="form.voyageNo"
        placeholder="请输入航次/货物运输批次号"
      />
    </el-form-item>
      <el-form-item label="绑定对象类型" prop="bindObjType">
        <el-select v-model.trim="form.bindObjType" @change="bindObjTypeChange" placeholder="请选择对象类型">
          <el-option
            v-for="(item, index) in dict.type.sgs_bind_obj"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="绑定对象ID" prop="bindObjId">
        <el-input v-model.trim="form.bindObjId" placeholder="请输入绑定对象ID" />
      </el-form-item>
      <el-form-item label="业务类型" prop="rdCode">
        <el-select v-model.trim="form.rdCode" placeholder="请选择业务类型">
          <el-option
            v-for="(item, index) in dict.type.sgs_bill_rd_code"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="提单类型" prop="billType">
        <el-select v-model.trim="form.billType"  placeholder="请选择对象类型">
          <el-option
            v-for="(item, index) in dict.type.sgs_bill_type"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="本次提货重量" prop="goodsWt">
        <el-input-number v-model.trim="form.goodsWt" :min="0" label="请输入本次提货重量"></el-input-number>
      </el-form-item>
      <el-form-item label="进出方向" prop="iEDirection">
        <el-select v-model.trim="form.iEDirection" placeholder="请选择进出方向">
          <el-option
            v-for="(item, index) in dict.type.sgs_field_ietype"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="集装箱号1" prop="contaId1">
        <el-input v-model.trim="form.contaId1" placeholder="请输入集装箱号1" />
      </el-form-item>
      <el-form-item label="集装箱1重量" prop="conta1Weight">
        <el-input-number v-model.trim="form.conta1Weight" :min="0" label="请输入集装箱1重量"></el-input-number>
      </el-form-item>

      <el-form-item label="集装箱号2" prop="contaId2">
        <el-input v-model.trim="form.contaId2" placeholder="请输入集装箱号2" />
      </el-form-item>
      <el-form-item label="集装箱2重量" prop="conta2Weight">
        <el-input-number v-model.trim="form.conta2Weight" :min="0" label="请输入集装箱号2重量"></el-input-number>
      </el-form-item>
      <el-form-item label="安全智能锁号1" prop="esealId1">
        <el-input
          v-model.trim="form.esealId1"
          placeholder="请输入安全智能锁号1"
        />
      </el-form-item>
      <el-form-item label="安全智能锁号2" prop="esealId2">
        <el-input
          v-model.trim="form.esealId2"
          placeholder="请输入安全智能锁号2"
        />
      </el-form-item>
      <el-form-item label="船名(海运时有效)" prop="transportId">
        <el-input
          v-model.trim="form.transportId"
          placeholder="请输入船名(海运时有效)"
        />
      </el-form-item>
      <!-- <el-form-item label="备注" prop="remark">
        <el-input
          v-model.trim="form.remark"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item> -->
    </el-form>
    <el-row :gutter="10" class="mb8" v-if="dialogType != 'detail'">
      <el-col :span="1.5">
        <el-button
          v-if="editIndex != -1"
          type="primary"
          plain
          icon="el-icon-edit"
          @click="handleSaveEdit"
          size="mini"
          >保存修改</el-button
        >
        <el-button
          v-else
          plain
          icon="el-icon-plus"
          type="success"
          @click="handleAddEdit('add')"
          size="mini"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <basic-table
      ref="tableList"
      :columns="columns"
      size="mini"
      :tableData="tableDataPage"
      :total="tableData.length"
      :pageSize="pageParams.pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :emptySmall="true"
    >
      <template #bindObjType="scope">
        <dict-tag
          :options="dict.type.sgs_bind_obj"
          :value="scope.row.bindObjType"
        ></dict-tag>
      </template>
      <template #rdCode="scope">
        <dict-tag
          :options="dict.type.sgs_bill_rd_code"
          :value="scope.row.rdCode"
        ></dict-tag>
      </template>
      <template #billType="scope">
        <dict-tag
          :options="dict.type.sgs_bill_type"
          :value="scope.row.billType"
        ></dict-tag>
      </template>
      <template #iEDirection="scope">
        <dict-tag
          :options="dict.type.sgs_field_ietype"
          :value="scope.row.iEDirection"
        ></dict-tag>
      </template>
      <template #operate="scope" v-if="dialogType != 'detail'">
        <div class="option-menu">
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleAddEdit('edit', scope.row, scope.index)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleDelete(scope.index, tableData)"
          >
            删除
          </el-button>
        </div>
      </template>
    </basic-table>
  </div>
</template>

<script>
export default {
  name: "AbroadInfo",
  dicts: ["sgs_bind_obj", "sgs_field_ietype", "sgs_bill_type", "sgs_bill_rd_code"],
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    bulkCargoListData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        id: null,
        hid: null,
        gNo: null,
        bindObjType: null,
        bindObjId: null,
        iEDirection: null,
        transportId: null,
        voyageNo: null,
        rdCode: null,
        billType: null,
        goodsWt: null,
        contaId1: null,
        contaId2: null,
        conta1Weight:null,
        conta2Weight:null,
        esealId1: null,
        esealId2: null,
        remark: null,
      },
      // 表单校验
      rules: {
        hid: [{ required: true, message: "表头ID不能为空", trigger: "blur" }],
        gNo: [{ required: true, message: "表体序号不能为空", trigger: "blur" }],
        bindObjType: [
          { required: true, message: "对象类型不能为空", trigger: "change" },
        ],
        rdCode: [
          { required: true, message: "业务类型不能为空", trigger: "blur" },
        ],
        bindObjId: [
          { required: true, message: "绑定对象ID不能为空", trigger: "blur" },
        ],
        conta1Weight: [
          { required: false, message: "集装箱1不为空时集装箱1重量也不能为空", trigger: "blur" },
        ],
        conta2Weight: [
          { required: false, message: "集装箱2不为空时集装箱2重量也不能为空", trigger: "blur" },
        ],
        iEDirection: [
          { required: true, message: "进出方向不能为空", trigger: "blur" },
        ],
        goodsWt: [
          { required: true, message: "本次提货重量不能为空", trigger: "blur" },
        ],
        voyageNo: [
          { required: true, message: "批次号不能为空", trigger: "blur" },
        ],
        billType: [
          { required: false, message: "绑定对象类型为提单时，提单类型不能为空", trigger: "blur" },
        ],
      },
      editIndex: -1,
      // 列表数据
      tableData: [],
      columns: [
        {
          prop: "bindObjType",
          label: "对象类型",
          align: "center",
          slot: true
        },
        {
          prop: "rdCode",
          label: "业务类型",
          align: "center",
          slot: true
        },
        {
          prop: "billType",
          label: "提单类型",
          align: "center",
          slot: true
        },
        {
          prop: "goodsWt",
          label: "本次提货重量",
          align: "center",
          minWidth: 100
        },
        {
           prop: "bindObjId",
           label: "绑定对象ID",
           align: "center",
         },
        {
          prop: "iEDirection",
          label: "进出方向",
          align: "center",
          slot: true
        },
        {
          prop: "voyageNo",
          label: "航次/货物运输批次号",
          align: "center",
          minWidth: 150
        },
        {
          prop: "contaId1",
          label: "集装箱号1",
          align: "center",
          minWidth: 100
        },
        {
          prop: "contaId2",
          label: "集装箱号2",
          align: "center",
          minWidth: 100
        },
        {
          prop: "esealId1",
          label: "安全智能锁号1",
          align: "center",
          minWidth: 130
        },
        {
          prop: "esealId2",
          label: "安全智能锁号2",
          align: "center",
          minWidth: 130
        },
        {
          prop: "transportId",
          label: "船名(海运)",
          align: "center",
          minWidth: 100
        },
        // {
        //   prop: "remark",
        //   label: "备注",
        //   align: "center",
        // },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 140,
          fixed: "right",
        },
      ],
      pageParams: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  computed: {
    tableDataPage() {
      let arr = this.tableData;
      const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize;
      const end = this.pageParams.pageNum * this.pageParams.pageSize;
      return arr.slice(start, end);
    },
  },
  watch: {
    bulkCargoListData: {
      immediate: true,
      handler(val) {
        this.tableData = val;
      },
    },
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageParams.pageSize = val.pageSize;
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val.currentPage;
    },
    initForm() {
      this.form = {
        id: null,
        hid: null,
        gNo: null,
        bindObjType: null,
        bindObjId: null,
        iEDirection: null,
        transportId: null,
        voyageNo: null,
        rdCode: null,
        billType: null,
        goodsWt: null,
        contaId1: null,
        contaId2: null,
        conta1Weight: null,
        conta2Weight: null,
        esealId1: null,
        esealId2: null,
        remark: null,
      };
    },
    contaId1Change(val){
      if(val!=null&&val!=''){
        this.rules.conta1Weight[0].required=true;
      }else{
        this.rules.conta1Weight[0].required=false;
      }
    },
    contaId2Change(val){
      if(val!=null&&val!=''){
        this.rules.conta2Weight[0].required=true;
      }else{
        this.rules.conta2Weight[0].required=false;
      }
    },
    bindObjTypeChange(val){
      if(val=='B'){
        this.rules.billType[0].required=true;
      }else{
        this.rules.billType[0].required=false;
      }
    },


    // 新增/编辑
    handleAddEdit(type, row, index) {
      if (type === "add") {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.tableData.unshift({ ...this.form });
            this.$emit("receiveSubList", this.tableData);
            this.initForm();
            this.$refs["form"].resetFields();
          }
        });
      } else {
        this.form = { ...row };
        this.editIndex = index;
      }
    },
    // 保存修改
    handleSaveEdit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, { ...this.form });
          this.$emit("receiveSubList", this.tableData);
          this.initForm();
          this.$refs["form"].resetFields();
          this.editIndex = -1;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index, rows) {
      rows.splice(index, 1);
      this.$emit("receiveSubList", this.tableData);
      //计算当前页是否需要前移
      let totalPage = Math.ceil(
        this.tableData.length / this.pageParams.pageSize
      );
      if (this.pageParams.pageNum > 1 && this.pageParams.pageNum > totalPage) {
        this.pageParams.pageNum -= 1;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-form {
  ::v-deep .el-form-item__label {
    line-height: 16px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
